<template>
    <div id="max">
       <div id="max-top">
         <img :src="imgUrl" style="height: 120px;width: 100%" />
       </div>
      <div id="max-bo">
        <div class="s1">
          <div class="s2">
            <img :src="formData.timage" style="width: 90px;height: 90px;"/>
          </div>
          <div class="s2-1">
            <span>{{formData.tname}}</span>
          </div>
          <div class="s3">
            <span>{{formData.tjianjie}}</span>
          </div>
        </div>
      </div>
      <div id="max-butoon">
        <div class="b-1">
          <span>共有{{count}}个录播课程</span>
        </div>
        <div class="b-2" >
          <el-row>
            <div v-for="o in tablesData" :key="o.kid" @click="dianji(o.kid)" >
            <el-col :span="8" style="width: 285px;margin-right: 10px;margin-bottom: 30px" >
              <el-card :body-style="{ padding: '0px' }" shadow="hover">
                <img :src="o.courseImage" class="image"/>
                <div style="padding: 14px;" class="text1">
                  <span>{{o.courseName}}</span><br/>
                  <span class="ss1">{{o.learnCount}}人已经学习</span><br/>
                  <div v-if="o.courseisfire==1">
                    <span class="ss2">￥{{o.coursePrice}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
                    <span class="ss3" v-if="o.courseVprice>0">SVIP：￥{{o.courseVprice}}</span>
                    <span class="ss3" v-else>SVIP：￥免费</span>
                  </div>
                  <div v-else="o.courseisfire==0">
                    <span class="ss2">免费</span>
                  </div>

                </div>
              </el-card>
            </el-col>
            </div>
          </el-row>
        </div>
      </div>
    </div>
</template>
<script>
  export default {
    data(){
      return {
        // imgUrl:"http://meltange.oss-cn-beijing.aliyuncs.com/aaa/123.jpg",
        // circleUrl:"http://meltange.oss-cn-beijing.aliyuncs.com/aaa/123.jpg",
        imgUrl:require("../../assets/t-1.jpg"),
        //circleUrl:require("../../assets/13.jpg"),
        formData:[],
        count:'',
        tablesData:[],
        money:'199.00',
        money1:'免费',
        tid:""
      }

    },
    methods:{
      //查询
      query(){
        this.$axios.get("http://localhost:8899/teacher-front/demo/teacher/queryByTid?tid="+this.tid).then(r=>{
          //alert(JSON.stringify(r.data.obj))
          this.formData=r.data.obj;
        })
      },
      //课程总数
      kecount(){
        this.$axios.get("http://localhost:8899/teacher-front/demo/course/kecount?tid="+this.tid).then(r=>{
          this.count=r.data.obj;
        })
      },
      //课程的基本信息
      coursexinxi(){
        this.$axios.get("http://localhost:8899/teacher-front/demo/course/jiben?tid="+this.tid).then(r=>{
          alert(JSON.stringify(r.data.obj))
          this.tablesData=r.data.obj;
        })
      },
      dianji(row){
        alert(JSON.stringify(row))
      }
    },
    created(){
      let tid = this.$route.query.tid;
      this.tid=tid;
      let aa = sessionStorage.getItem("uid");
      this.kecount();
      this.query();
      this.coursexinxi();
    }
  }
</script>

<style>
  #max{
    background-color: #F5F5F5;
  }
  #max-bo{
     background-color:#FFFFFF;
     height: 140px;
     width: 100%;
    box-shadow: 2px 2px 5px #909090;
   }
  #max-top{
    height: 120px;
  }
  .s1{
    height: 140px;
    width: 1200px;
    margin: auto;
  }
  .s2{
    width: 90px;
    height: 140px;
    float: left;
  }
  .s2 img{
    position:absolute;
    box-shadow:2px 2px 10px gray;
    border-radius: 50%;
    top: 85px;
  }
  .s2-1{
    margin:0 0 10px 100px;
    width: 100px;
  }
  .s2-1 span{
    font-size: 20px;
    text-align: center;
  }
  .s3{
    width: 1100px;
    height: 80px;
    float: right;
    /*margin-top: 50px;*/
  }
  #max-butoon{
    width: 1200px;
    margin: auto;
  }
  .b-1{
    height: 30px;
    margin-top: 10px;
  }
  .b-1 span{
    color: #999999;
  }
  .b-2{

    margin-top: 10px;
    /*height: 800px;*/
  }
  .b-2 :hover{

  }

  /*卡片*/
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width:280px;
    height: 139px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .ss1{
    font-size: 12px;
  }
  .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
    -webkit-box-shadow:5px 5px 20px 5px rgba(0,0,0,.1);
    box-shadow: 5px 5px 20px 5px rgba(0,0,0,.1);
  }
  .ss2{
    color: red;
  }
  .ss3{
    color: red;
    font-size: 13px;
  }
  .text1 span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
